<template>
    <div>
        <div>
            <div style="margin-top: 10px;display: flex;justify-content: left">
                <el-button icon="el-icon-plus" type="primary" @click="openDialog">商户入驻</el-button>
            </div>
        </div>
        <div  style="width:1600px;margin-top: 20px;">
            <el-table
                    stripe
                    v-loading="tableLoading"
                    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                    style="width: 100%">
                <el-table-column
                        width="50"
                        label="ID"
                        prop="id">
                </el-table-column>
                <el-table-column
                        label="法人姓名"
                        prop="name">
                </el-table-column>
                <el-table-column
                        label="商铺名称"
                        prop="storeName">
                </el-table-column>
                <el-table-column
                        label="银行卡号"
                        prop="bankCard">
                </el-table-column>
                <el-table-column
                        label="联系电话"
                        prop="phone">
                </el-table-column>
                <el-table-column
                        label="身份证"
                        prop="idCard">
                    <template slot-scope="scope">
                        <el-tag v-if="(scope.row.idCard !== null &&scope.row.idCard !== '')">已上传</el-tag>
                        <el-tag v-else type="danger" >未上传</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="邮箱"
                        prop="email">
                </el-table-column>
                <el-table-column
                        label="状态"
                        width="200"
                        prop="stateText"
                >
                </el-table-column>
                <el-table-column align="right" width="300">
                    <template slot="header" slot-scope="scope">
                        <el-input
                                v-model="search"
                                size="mini"
                                placeholder="输入商户名称关键字搜索"/>
                    </template>
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="idCardDetail(scope.row.idCard)">详情</el-button>
                        <el-button size="mini" type="warning" @click="fadOrder(scope.row)">e签宝</el-button>
                        <el-button size="mini" type="warning" @click="fadCallback(scope.row)">模拟</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="deleteBusiness(scope.row)"
                        >离场</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-dialog title="商户入驻" :visible.sync="dialogFormVisible" >
                <el-form :model="form" style="height: 400px">
                    <el-col :span="12">
                        <el-form-item label="法人姓名" :label-width="formLabelWidth">
                            <el-input v-model="form.name" autocomplete="off" style="width: 300px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="商铺名称" :label-width="formLabelWidth">
                            <el-input v-model="form.storeName" autocomplete="off" style="width: 300px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="银行卡号" :label-width="formLabelWidth">
                            <el-input v-model="form.bankCard" autocomplete="off" style="width: 300px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话" :label-width="formLabelWidth">
                            <el-input v-model="form.phone" autocomplete="off" style="width: 300px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="邮箱" :label-width="formLabelWidth">
                            <el-input v-model="form.email" autocomplete="off" style="width: 300px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="身份证" :label-width="formLabelWidth">

                            <el-upload
                                    class="upload-demo"
                                    drag
                                    action="/plateform/secbusiness/business/data/upload"
                                    :headers="getToken()"
                                    :show-file-list="false"
                                    :before-upload="beforeAvatarUpload"
                                    :on-success="handleAvatarSuccess"
                                    v-loading="loading"
                                    element-loading-text="上传并识别中，请稍后..."
                                    element-loading-spinner="el-icon-loading"
                                    element-loading-background="rgba(0, 0, 0, 0.8)"
                                    >
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <div v-else>
                                    <i class="el-icon-upload"></i>
                                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                </div>

                                <div class="el-upload__tip" slot="tip"style="color: red">
                                    身份证上传后会自动进行三要素鉴权，以保证姓名、身份证、提现银行卡一致（商业用途）
                                    <span style="margin-left: 20px;">
                                        <span>鉴权结果：</span> <el-tag type="success" style="font-size: 20px">{{threeResult}}</el-tag>
                                    </span>

                                </div>
                            </el-upload>
                        </el-form-item>
                    </el-col>

                </el-form>
                <div>
                    <el-descriptions  title="OCR提取身份证内容结果" direction="vertical" :column="3" border>
                        <el-descriptions-item label="姓名">{{ocrData.name}}</el-descriptions-item>
                        <el-descriptions-item label="性别">{{ocrData.sex}}</el-descriptions-item>
                        <el-descriptions-item label="民族">{{ocrData.ethnicity}}</el-descriptions-item>
                        <el-descriptions-item label="出生日期">{{ocrData.birthDate}}  </el-descriptions-item>
                        <el-descriptions-item label="住址">{{ocrData.address}}</el-descriptions-item>
                        <el-descriptions-item label="身份证号">{{ocrData.idNumber}}</el-descriptions-item>
                    </el-descriptions>
                 </div>
                <div slot="footer" class="dialog-footer">
                    <div>
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addBusiness">确 定</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>
        <div>
            <el-dialog title="详细信息" :visible.sync="dialogTableVisible" >
                <div v-loading="loading">
                    <el-descriptions  title="上传身份证详细信息" direction="vertical" :column="3" border>
                        <el-descriptions-item label="姓名">{{ocrTableData.name}}</el-descriptions-item>
                        <el-descriptions-item label="性别">{{ocrTableData.sex}}</el-descriptions-item>
                        <el-descriptions-item label="民族">{{ocrTableData.ethnicity}}</el-descriptions-item>
                        <el-descriptions-item label="出生日期">{{ocrTableData.birthDate}}  </el-descriptions-item>
                        <el-descriptions-item label="住址">{{ocrTableData.address}}</el-descriptions-item>
                        <el-descriptions-item label="身份证号">{{ocrTableData.idNumber}}</el-descriptions-item>
                    </el-descriptions>
                </div>
                <div slot="footer" class="dialog-footer">
                    <div>
                        <el-button @click="dialogTableVisible = false">关闭</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>
        <div>
            <el-dialog title="签署信息" :visible.sync="dialogSignVisible" >
                <div>
                    <el-descriptions  title="待签署详细信息" direction="vertical" :column="1" border>
                        <el-descriptions-item label="签署任务ID">{{signTableData.signTaskId}}</el-descriptions-item>
                        <el-descriptions-item label="参与方签署短链接"><a :href="signTableData.actorSignTaskUrl" target=“_blank”>{{signTableData.actorSignTaskUrl}}</a></el-descriptions-item>
                        <el-descriptions-item label="参与方签署长链接"><a :href="signTableData.actorSignTaskEmbedUrl" target=“_blank”>{{signTableData.actorSignTaskEmbedUrl}}</a></el-descriptions-item>
                    </el-descriptions>
                </div>
                <div slot="footer" class="dialog-footer">
                    <div>
                        <el-button @click="dialogSignVisible = false">关闭</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>
    </div>

</template>

<script>
    export default {
        name: "SecBusiness",
        data() {
            return {
                search: '',
                dialogFormVisible: false,
                dialogTableVisible: false,
                dialogSignVisible: false,
                loading:false,
                tableLoading:false,
                tableData: [],
                ocrTableData: [],
                signTableData: [],
                form: {
                    name:'',
                    storeName:'',
                    bankCard:'',
                    phone:'',
                    idCard:'',
                    bussLicense:'',
                    email:'',
                    state:''
                },
                ocrData:{
                    id:0,
                    name:'',
                    sex:'',
                    ethnicity:'',
                    birthDate:'',
                    address:'',
                    idNumber:''
                },
                threeResult:'待认证',
                imageUrl:'',
                formLabelWidth: '120px',
                token: ''
            }
        },
        mounted() {
            this.initBusiness();
        },
        methods: {
            getToken(){
                let str = window.sessionStorage.getItem("token");
                this.token = str;
                const authorization = this.token;
                return { "X-TOKEN":authorization }
            },
            fadCallback(row){
                this.postRequest("/secbusiness/business/fadCallback",row).then(resp=>{
                    if(resp){
                        this.initBusiness();
                    }
                })
            },
            fadOrder(row){

                if(row.state == 0 || row.state == 1){
                    if(row.email || row.phone){
                        this.tableLoading = true;
                        this.postRequest("/secbusiness/business/data/fad",row).then(resp=>{
                            if(resp){
                                this.initBusiness();
                                this.tableLoading = false;
                            }
                        })
                    }else {
                        this.$message.error('尚未填写手机或邮箱信息，无法完成在线签署！！！');
                    }
                }else if(row.state == 2){
                    this.tableLoading = true;
                    this.dialogSignVisible = true;
                    this.getRequest("/secbusiness/business/fadByParentId/"+row.id).then(resp=>{
                        if(resp){
                            this.signTableData = resp.data;
                            this.tableLoading = false;
                        }
                    })

                }else if(row.state == 3){
                    this.$message.error('商家已经成功入驻，无需再次签订！！！');

                }else{
                    this.$message.error('请重新与商家磋商合同细节！！！');
                }


            },
            idCardDetail(parentId){
                this.ocrTableData =[];
                if(parentId){
                    this.dialogTableVisible = true;
                    this.loading = true;
                    this.getRequest("/secbusiness/business/idCardByParentId/"+parentId).then(resp=>{
                        if(resp){
                            this.ocrTableData = resp.data;
                            this.loading = false;
                        }
                    })
                }else {
                    this.$message.error('身份信息未上传,无详情信息！！！');
                }

            },
            deleteBusiness(row) {
                this.$confirm('此操作将与商户： ['+row.storeName+']终止合作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    row.state = 4;
                    this.putRequest("/secbusiness/business/updateBusiness",row).then(resp=>{
                        if(resp){
                            this.initBusiness();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            addBusiness(){
                this.postRequest("/secbusiness/business/addBusiness",this.form).then(resp=>{
                    if(resp){
                        this.dialogFormVisible = false;
                        this.initBusiness();
                    }
                })
            },
            handleAvatarSuccess(res, file) {
                this.dialogFormVisible = true;
                this.form.idCard = res.data;
                this.imageUrl = URL.createObjectURL(file.raw);
                //提取身份证上面的信息
                this.getRequest("/secbusiness/business/data/ocr/?path="+res.data).then(resp=>{
                    //console.log(resp);
                    if(resp){
                        this.loading = false;
                        this.form.idCard = resp.data.id ;
                        this.ocrData.name = resp.data.name ;
                        this.ocrData.sex = resp.data.sex;
                        this.ocrData.ethnicity = resp.data.ethnicity;
                        this.ocrData.birthDate = resp.data.birthDate;
                        this.ocrData.address = resp.data.address;
                        this.ocrData.idNumber = resp.data.idNumber;
                        if(this.form.name==this.ocrData.name){
                            //三要素鉴权(阿里云)，节省时间，不整合了
                            this.threeResult = "认证通过";
                            this.form.state = 1;
                        }else{
                            this.threeResult = "认证未通过";
                            this.form.state = 0;
                        }
                    }
                })

            },
            beforeAvatarUpload(){
                if(this.form.name=='' || this.form.bankCard=='' || this.form.phone == ''){
                    this.$message.error('请先填写 法人姓名 、 银行卡号 和 联系电话！！！');
                    return false;
                }
                this.loading = true;
                return true;
            },
            openDialog(){
                this.dialogFormVisible = true;
                this.form.name='';
                this.form.storeName='';
                this.form.bankCard='';
                this.form.phone='';
                this.form.idCard='';
                this.form.bussLicense='';
                this.form.email='';
                this.form.state=0;
                this.ocrData.name='';
                this.ocrData.sex='';
                this.ocrData.ethnicity='';
                this.ocrData.birthDate='';
                this.ocrData.address='';
                this.ocrData.idNumber='';
                this.threeResult='待认证';
                this.imageUrl='';
            },
            initBusiness(){
                this.getRequest("/secbusiness/business/init").then(resp=>{
                    if(resp){
                        this.tableData = resp.data;

                    }
                })
            }
        }
    }
</script>

<style scoped>
    .dialog-footer {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .avatar {
        width: 90%;
        height: 90%;
        margin-left: 20px;
        margin-top: 10px;
        display: block;
    }
</style>